import { createApp } from "vue";

import Cookies from "js-cookie";

import ElementPlus from "element-plus";
import locale from "element-plus/lib/locale/lang/zh-cn"; // 中文语言

import "@/assets/styles/index.scss"; // global css

import App from "./App";
import store from "./store";
import router from "./router";
import directive from "./directive"; // directive

// 注册指令
import plugins from "./plugins"; // plugins
import { download } from "@/utils/request";

// svg图标
import "virtual:svg-icons-register";
import SvgIcon from "@/components/SvgIcon";
import elementIcons from "@/components/SvgIcon/svgicon";

import "./permission"; // permission control

import { useDict } from "@/utils/dict";
import {
  getStatusColor,
  parseTime,
  resetForm,
  addDateRange,
  handleTree,
  selectDictLabel,
  selectDictLabels,
} from "@/utils/ruoyi";

// 分页组件
import Pagination from "@/components/Pagination";
// 自定义表格工具组件
import RightToolbar from "@/components/RightToolbar";
// 富文本组件
import Editor from "@/components/Editor";
// 文件上传组件
import FileUpload from "@/components/FileUpload";
// 图片上传组件
import ImageUpload from "@/components/ImageUpload";
// 图片预览组件
import ImagePreview from "@/components/ImagePreview";
// 自定义树选择组件
import TreeSelect from "@/components/TreeSelect";
// 字典标签组件
import DictTag from "@/components/DictTag";
import UUID from "vue-uuid";

const app = createApp(App);

// 全局方法挂载
app.config.globalProperties.useDict = useDict;
app.config.globalProperties.download = download;
app.config.globalProperties.parseTime = parseTime;
app.config.globalProperties.getStatusColor = getStatusColor;
app.config.globalProperties.resetForm = resetForm;
app.config.globalProperties.handleTree = handleTree;
app.config.globalProperties.addDateRange = addDateRange;
app.config.globalProperties.selectDictLabel = selectDictLabel;
app.config.globalProperties.selectDictLabels = selectDictLabels;

// 全局组件挂载
app.component("DictTag", DictTag);
app.component("Pagination", Pagination);
app.component("TreeSelect", TreeSelect);
app.component("FileUpload", FileUpload);
app.component("ImageUpload", ImageUpload);
app.component("ImagePreview", ImagePreview);
app.component("RightToolbar", RightToolbar);
app.component("Editor", Editor);

app.use(router);
app.use(store);
app.use(plugins);
app.use(elementIcons);
app.use(UUID);
app.component("svg-icon", SvgIcon);

app.directive("enter-next", {
  mounted(el) {
    el.addEventListener("keyup", handleEnter);
  },
  beforeUnmount(el) {
    el.removeEventListener("keyup", handleEnter);
  },
});
// 点击回车进入下一个表单项(指令实现)
app.directive("enterToNext", {
  mounted(el) {
    // let frm = el.querySelector('.el-form');
    // let inputs = el.querySelectorAll("input");
    let inputs = Array.from(el.querySelectorAll("input"));
    for (let i = 0; i < inputs.length; i++) {
      const node = inputs[i];
      // 在这里对每个节点进行操作，比如输出节点内容
      if (node.disabled) {
        inputs.splice(i, 1);
      }
    }
    // 绑定回写事件
    for (var i = 0; i < inputs.length; i++) {
      inputs[i].setAttribute("keyFocusIndex", i);
      inputs[i].addEventListener("keyup", (ev) => {
        if (ev.keyCode === 13) {
          const targetTo = ev.srcElement.getAttribute("keyFocusTo");
          if (targetTo) {
            this.$refs[targetTo].$el.focus();
            this.$refs[targetTo].$el.select();
          } else {
            var attrIndex = ev.srcElement.getAttribute("keyFocusIndex");
            var ctlI = parseInt(attrIndex);
            ctlI++;
            inputs[ctlI].select();
            inputs[ctlI].focus();
            // for (var j = ctlI; j <= inputs.length - 1; j++) {
            //   if (inputs[j].getAttribute("disabled") == null) {
            //     if (j <= inputs.length) {
            //       inputs[j].focus();
            //       inputs[j].select();
            //       break;
            //     }
            //   }
            // }
          }
        }
      });
    }
  },
  // inserted: function (el) {

  // }
});

// 防重复点击(指令实现)
app.directive("preventReClick", {
  mounted(el, binding) {
    el.addEventListener("click", () => {
      if (!el.disabled) {
        el.disabled = true;
        el.style.opacity = "0.5";
        el.style.cursor = "not-allowed";
        setTimeout(() => {
          el.disabled = false;
          el.style.opacity = "1";
          el.style.cursor = "";
        }, binding.value || 2000);
      }
    });
  },
});

directive(app);

// 使用element-plus 并且设置全局的大小
app.use(ElementPlus, {
  locale: locale,
  // 支持 large、default、small
  size: Cookies.get("size") || "default",
});

app.mount("#app");
